<template>
    <div>
        <mengban v-show="opOrcl"></mengban>
        <div class="top">
            <i class="el-icon-s-data aa"> {{workstatus}}</i>
            <span>|</span>
            <i class="el-icon-s-custom aa"> {{education}}</i>
            <span>|</span>
            <!-- <i class="el-icon-s-opportunity aa"> 在校—暂不考虑</i>
            <span>|</span> -->
            <i class="el-icon-phone aa"> {{phone}}</i>
            <span>|</span>
            <i class="aa"> ID : {{jobseekerid}}</i>
            <span>|</span>
            <i class="el-icon-edit dd" @click="editInfo()">编辑</i>
        </div>
        <div class="PersonalAdvantage">
            <h2><span>|</span>个人优势</h2>
            <div class="hrhr"></div>
            <ul>
                <i class="cc"> {{advantage}}</i>
            </ul>
        </div>
        <div class="ExpectedPosition">
            <h2><span>|</span>期望职位</h2>
            <div class="hrhr"></div>
            <ul>
                <!-- 求职类型 -->
                <i class="el-icon-coin cc"> {{exceptjob}}</i>
                <label class="bb"></label>
                <!-- 期望职位 -->
                <i class="el-icon-magic-stick cc"> {{exceptwork}}</i>
                <label class="bb"></label>
                <!-- 期望薪资 -->
                <i class="el-icon-document cc"> {{salaryrequire}}</i>
                <label class="bb"></label>
                <!-- 工作城市 -->
                <i class="el-icon-location cc"> {{workcity}}</i>
            </ul>
        </div>
        <div class="ExpectedPosition">
            <h2><span>|</span>实习经历</h2>
            <div class="hrhr"></div>
            <ul>
                <li v-for="(i,index) in PPracticejob" :key="index">
                    <!-- 点击查看个人实习经历内容 -->
                    <div v-show="prt" class="seePracticejob">
                        <i class="el-icon-close close" @click="closePracticejob()"></i>
                         <div style="width:90%; padding:0 5%;">
                            <!-- 实习经历 -->
                            <h1 class="name">实习经历</h1>
                            <el-form ref="form" :model="form" label-width="80px">
                                <el-row>
                                <el-col :span="12">
                                        <el-form-item label="公司名称" style="width:98%;">
                                        <el-input v-model="form.companyname" placeholder="请输入公司名称" :disabled="disabled"></el-input>
                                        </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="所属行业" style="width:98%;">
                                        <el-input v-model="form.industry" placeholder="请输入所属行业" :disabled="disabled" ></el-input>
                                    </el-form-item>
                                </el-col>
                                </el-row>
                                <el-row>
                                <el-col :span="12">
                                    <el-form-item label="所属部门" style="width:98%;">
                                        <el-input v-model="form.department" placeholder="请输入所属部门" :disabled="disabled"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="职位名称" style="width:98%;">
                                        <el-input v-model="form.jobname" placeholder="请输入职位名称" :disabled="disabled"></el-input>
                                    </el-form-item>
                                </el-col>
                                </el-row>

                                <el-row>
                                <el-col :span="12">
                                    <el-form-item label="职位类型" style="width:98%;">
                                        <el-input v-model="form.jobtype" placeholder="请输入职位类型" :disabled="disabled"></el-input>
                                    </el-form-item>   
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="拥有技能" style="width:98%;">
                                        <el-input v-model="form.skills" placeholder="请输入拥有技能" :disabled="disabled"></el-input>
                                    </el-form-item>  
                                </el-col>
                                </el-row>

                                <el-form-item label="在职时间" style="width:99%">
                                    <el-col :span="11">
                                    <el-date-picker type="date" placeholder="开始时间" v-model="form.date1" style="width: 100%;" :disabled="disabled"></el-date-picker>
                                    </el-col>
                                    <el-col class="line" :span="2">-</el-col>
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="结束时间" v-model="form.date2" style="width: 100%;" :disabled="disabled"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                
                                <el-form-item label="工作内容" style="width:99%">
                                    <el-input type="textarea" v-model="form.workcontent" rows="2px" :disabled="disabled"></el-input>
                                </el-form-item>

                                <el-form-item> 
                                    <el-button icon="el-icon-delete" circle class="delete" @click="deleteForm()"></el-button>
                                    <el-button @click="updateForm()" class="chongzhi">修改</el-button>
                                    <el-button type="primary" @click="updateptjob()" class="button">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <i class="cc" @click="openPracticejob(i)">{{i.companyname}}</i>
                    <!-- <label class="bb">|</label> -->
               </li>
            </ul>
            <i class="el-icon-edit-outline edit" @click="editPracticejob()">添加</i>
        </div>
        <div class="ExpectedPosition">
            <h2><span>|</span>项目经历</h2>
            <div class="hrhr"></div>
            <ul>
                <li v-for="(item,num) in PProjectexp" :key="num">
                    <!-- 点击查看个人项目经历内容 -->
                    <div v-show="prx" class="seePerProjectexp">
                          <div style="width:90%;padding:0 2%">
                            <!-- 项目经历 -->
                            <i class="el-icon-close close" @click="closePerProjectexp()"></i>
                            <h1 class="name">项目经历</h1>
                            <el-form ref="form" :model="form1" label-width="80px">
                               <el-row>
                                   <el-col :span="12">
                                         <el-form-item label="项目名称">
                                             <el-input v-model="form1.name" placeholder="请输入项目名称" :disabled="disabled"></el-input>
                                         </el-form-item>
                                   </el-col>
                                   <el-col :span="12">
                                        <el-form-item label="项目角色">
                                            <el-select v-model="form1.role" placeholder="请选择项目角色" :disabled="disabled">
                                            <el-option label="产品经理" value="产品经理"></el-option>
                                            <el-option label="项目经理" value="项目经理"></el-option>
                                            <el-option label="架构师" value="架构师"></el-option>
                                            <el-option label="开发工程师" value="开发工程师"></el-option>
                                            <el-option label="开发工程师" value="开发工程师"></el-option>
                                            <el-option label="人机工程师" value="人机工程师"></el-option>
                                            <el-option label="配置管理员" value="配置管理员"></el-option>
                                            <el-option label="QA" value="QA"></el-option>
                                            <el-option label="SCM" value="SCM"></el-option>
                                            </el-select>
                                        </el-form-item>
                                   </el-col>
                               </el-row>
                                <el-form-item label="项目链接">
                                    <el-input v-model="form1.link" placeholder="没有可不填" :disabled="disabled"></el-input>
                                </el-form-item>
                                <el-form-item label="时间段">
                                    <el-col :span="11">
                                    <el-date-picker type="date" placeholder="开始时间" v-model="form1.date1" style="width: 100%;" :disabled="disabled"></el-date-picker>
                                    </el-col>
                                    <el-col class="line" :span="2">-</el-col>
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="结束时间" v-model="form1.date2" style="width: 100%;" :disabled="disabled"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                            
                                <el-form-item label="项目描述">
                                    <el-input type="textarea" v-model="form1.desc" rows="3px" :disabled="disabled"></el-input>
                                </el-form-item>
                                <el-form-item label="项目业绩">
                                    <el-input type="textarea" v-model="form1.achievement" rows="3px" placeholder="选填" :disabled="disabled"></el-input>
                                </el-form-item>
                                 <el-form-item> 
                                    <el-button icon="el-icon-delete" circle class="delete" @click="deleteForm1()"></el-button>
                                    <el-button @click="updateForm1()" class="chongzhi">修改</el-button>
                                    <el-button type="primary" @click="updateprexp()" class="button">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <i class="cc" @click="openPerProjectexp(item)">{{item.name}}</i>
                    <!-- <label class="bb">|</label> -->
                </li>
               
            </ul>
            <i class="el-icon-edit-outline edit" @click="editPerProjectexp()">添加</i>
        </div>
        <!-- <div class="ExpectedPosition">
            <h2><span>|</span>教育经历</h2>
            <div class="hrhr"></div>
            <ul>
                <i class="cc"> 教育经历1</i>
                <label class="bb">|</label>
                <i class="cc"> 教育经历2</i>
                <label class="bb">|</label>
                <i class="cc"> 行业不限</i>
                <i class="el-icon-edit-outline edit">添加</i>
            </ul>
        </div> -->
        <!-- <div class="ExpectedPosition">
            <h2><span>|</span>工作档案</h2>
            <div class="hrhr"></div>
            <ul>
                <li>
                    <i class="cc">工作档案1</i>
                </li>
            </ul>
            <i class="el-icon-edit-outline edit">添加</i>
        </div> -->
    </div>
</template>

<script>
import Mengban from '@/components/Mengban'
export default {
    name:'PersonalResume',
    components:{
        Mengban
    },
    data(){
        return{
        //期望和个人信息数据
          workstatus:'无数据',
          education:'无数据',
          phone:'无数据',
          advantage:'无数据',
          exceptjob:'无数据',
          workcity:'无数据',
          exceptwork:'无数据',
          salaryrequire:'无数据',
          jobseekerid:'无数据',

          PPracticejob:[],
          PProjectexp:[],

          //实习经历显示
          prt:false,
          //项目经历显示
          prx:false,
          //蒙版显示
          opOrcl:false,

         //实习经历数据
          form: {
            companyname: '',
            department:'',
            industry: '',
            jobname:'',
            date1: '',
            date2: '',
            jobtype: '',
            skills:'',
            workcontent: '',
            id:''
        },
        //项目经历数据
         form1: {
          name: '',
          link:'',
          role: '',
          date1: '',
          date2: '',
          achievement: '',
          desc: '',
          id:''
        },

        disabled:true
        }
    },
    methods:{
 //编辑个人信息【路由跳转】
        editInfo(){
          this.$router.push("/PersonalGetResume")
        },
//获取信息
        getInfo(){
            //获取【个人信息】
            depot.get({
                url:'/empservice/resume/getResume',
                cb:(r)=>{
                    console.log("获取个人信息",r);
                    let a = r.data.resume
                    this.education = a.education
                    this.workstatus = a.workstatus
                    this.phone = a.phone
                    this.jobseekerid = a.jobseekerid
                    this.advantage = a.advantage
                    this.bus.$emit("info1",r.data.resume)
                }
            })
            //【个人期望】
            depot.get({
                url:'/empservice/exceptaboutjob/getInfoOfExcept',
                cb:(rr)=>{
                    console.log("个人期望职业",rr);
                    let a = rr.data.except
                    this.exceptjob = a.exceptjob
                    this.exceptwork = a.exceptwork
                    this.workcity = a.workcity
                    this.salaryrequire = a.salaryrequire
                    this.bus.$emit("info2",rr.data.except)
                }
            })
            //【实习经历】获取
            depot.post({
              url:'/empservice/practicejob/getNumberPractice',
              cb:(res)=>{
                console.log("获取实习经历",res);
                this.PPracticejob = res.data.list
                console.log(this.PPracticejob);
              }
          })
            //【项目经历】获取
            depot.get({
              url:'/empservice/projectexp/getSelfProjectExp',
              cb:(res)=>{
                console.log("获取项目经历",res);
                this.PProjectexp = res.data.list
                console.log(this.PProjectexp);
              }
          })
        },
//编辑【实习经历】/【项目经历】
        editPracticejob(){
            this.$router.push("/PerPracticejob")
        },
        editPerProjectexp(){
            this.$router.push("/PerProjectexp")
        },
//【打开】实习经历/项目经历
        openPracticejob(i){
            console.log("实习经历",i);
            this.prt = true;
            this.opOrcl = true;
            this.form.companyname = i.companyname
            this.form.department = i.department
            this.form.industry = i.industry
            this.form.jobname = i.jobname
            this.form.date1 = i.starttoend
            this.form.date2 = i.starttoend
            this.form.jobtype = i.jobtype
            this.form.skills = i.skills
            this.form.workcontent = i.workcontent
            this.form.id = i.id
        },
        openPerProjectexp(i){
            console.log("项目经历",i);
            this.prx = true;
            this.opOrcl = true;
            this.form1.name = i.name
            this.form1.link = i.internet
            this.form1.role = i.people
            this.form1.date1 = i.starttime
            this.form1.date2 = i.endtime
            this.form1.achievement = i.reward
            this.form1.desc = i.description
            this.form1.id = i.id
        },
//【关闭】实习经历/项目经历
        closePracticejob(){
            this.prt = false;
            this.opOrcl = false;
            this.disabled = true;
        },
        closePerProjectexp(){
            this.prx = false;
            this.opOrcl = false;
            this.disabled = true;
        },
//【修改】实习经历/项目经历
        updateForm(){
            console.log(document.getElementById("aa"));
            this.disabled = false
        },
        updateForm1(){
            this.disabled = false
        },
//【保存修改后】的实习经历/项目经历
       updateptjob(){
          console.log(this.form.id);
          if(this.disabled == true){
              alert("请点击**修改**再更改内容！")
          }else{
              depot.post({
              url:'/empservice/practicejob/updatePracticeJob/'+this.form.id,
              data:{
                'companyname':this.form.companyname,
                'department':this.form.department,
                'jobtype':this.form.jobtype,
                'industry':this.form.industry,
                'skills':this.form.skills,
                'workcontent':this.form.workcontent,
                'jobname':this.form.jobname,
                'starttoend':this.form.date1,
              },
              cb:(res)=>{
                  alert(res.message)
                  this.closePracticejob();
                  this.getInfo()
              }
             })
          }
       },
       updateprexp(){
           console.log(this.form1.id);
          if(this.disabled == true){
              alert("请点击修改！")
          }else{
              depot.post({
              url:'/empservice/projectexp/updateProjectExp/'+this.form1.id,
              data:{
                    "description": this.form1.desc,
                    "endtime": this.form1.date2,
                    "internet": this.form1.link,
                    "name": this.form1.name,
                    "people": this.form1.role,
                    "reward":this.form1.achievement,
                    "starttime":this.form1.date1
              },
              cb:(res)=>{
                  alert(res.message)
                  this.closePerProjectexp();
                  this.getInfo()
              }
             })
          }
       },
//【删除】实习经历
       deleteForm(){
            console.log(this.form.id);
            // deletefn({
            //     url:'/empservice/practicejob/delete',
            //     params:{
            //        "id":this.form.id
            //     },
            //     cb:(res)=>{
            //         console.log(res);
            //     }
            // })
       },        
    },

    mounted:function(){
       
    },
    activated(){
        //获取信息
        this.getInfo()
    }
}
</script>

<style lang="less" scoped>
ul{
    margin: 0;
    padding: 0 20px;
}
.top{
    position: relative;
    span{
        color: gray;
    }
   .aa{
       margin:0 25px;
       color: rgb(88, 88, 88);
   }
}
.PersonalAdvantage,.ExpectedPosition{
    // box-shadow: 10px 10px 5px #888888;
    width: 100%;
    // height: 200px;
    // background-color: antiquewhite;
    margin-bottom: 10px;
    span{
        margin:0 10px;
        color: #3db3b7;
        font-size: 25px;
        font-weight: 800;
    }
    h2{
        margin: 0;
        // margin-left: 10px;
        color: rgb(61, 60, 60);
        font-weight: 400;
    }
    li{
        // float: left;
        display: inline-block;
        list-style: none;
        margin-right: 50px;
        cursor: pointer;
    }
    .bb{
        margin-left: 50px;
        color: #949494;
    }
    .cc{
        color: #494949;
        cursor: pointer;
    }
    .seePracticejob,.seePerProjectexp{
        // width: 36%;
        // height: 250px;
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 40%;
        .close{
            position:absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
        }
 //实习经历
        .name{
            color: #353535;
            font-size: 23px;
            margin: 5px 10px;
        }    
        .button{
            margin-left: 163px;
            float: right;
            background-image: linear-gradient(#7a7878, #5a5a5a);
            border: none;
        }
        .chongzhi{
            float: left;
            margin-left: -75px;
        }
        .back{
            font-size: 20px;
            margin-right: 55px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: 600;
            border-radius: 50%;
            margin-right: 30px;
        }

    }
}
.hrhr{
    width: 98%;
    margin: 0 auto;
    border: 1px dashed gray;
}
.edit{
    float: right;
    margin-right: 20px;
    color: #3db3b7;
    margin-top: -40px;
    cursor: pointer;
}
.dd{
    overflow: hidden;
    margin:-3px 30px;
    color: #424242;
    font-size: 16px;
}
.dd:hover{
    cursor: pointer;
    color: #00c5ab;
}
</style>